<template>
  <div class="wrapper">
    <div class="header">
      <span class="return" @click="back()">返回</span>
      {{clickGroupDetails.Name}}
    </div>
    <div class="groupItem">
      <img :onerror="defGroupImg" :src="clickGroupDetails.FaceUrl" alt="">
      <div class="groupText">
        <div class="groupName">{{clickGroupDetails.Name}}</div>
        <div class="groupId">群id:{{clickGroupDetails.GroupId}}</div>
      </div>
    </div>
    <div class="divisionLine"></div>
    <!-- <div class="myCard">
      <div class="myCardTitle">
        我的群名片
        <div class="notSet">未设置<img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
    </div> -->
    <div class="selectedFriends">
      <div class="friendList">
        <img  class="icon"  src="../../assets/img/icon_group@3x.png" alt="">
        <div class="faceItem">
          <img v-for="(item, index) in MemberFace" :onerror="defaultImg" :src="item.Tag_Profile_IM_Image" v-if="index < 3" alt="">
          <img v-show="clickGroupDetails.TypeEn === 'Private'" src="../../assets/img/icon_addfm@3x.png" alt="" @click="addGroupMemers">
        </div>
      </div>
      <div class="Set" @click="toMembersAll">成员{{MemberFace.length}}名<img src="../../assets/img/icon_shape@3x.png" alt=""></div>
    </div>
    <div class="divisionLine"></div>
    <!-- <div class="myCard">
      <div class="myCardTitle">
        聊天记录
        <div class="notSet"><img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
    </div> -->
    <div class="myCard">
      <div @click="groupTypeWrapper()" class="myCardTitle">
        群消息设置
        <div class="notSet">{{clickGroupDetails.MsgFlag}}<img src="../../assets/img/icon_shape@3x.png" alt=""></div>
      </div>
      <div class="lineWrapper">
        <div class="line"></div>
      </div>
    </div>
    <!-- <div class="divisionLine"></div> -->
    <div class="groupInfo">
      <div>
        <p class="groupName">群介绍</p>
        <p class="text">{{clickGroupDetails.Introduction?clickGroupDetails.Introduction:"群介绍不得超过40字"}}</p>
      </div>
      <div class="Set"></div>
    </div>
    <div class="sendWrapper">
       <mt-button type="danger" size="large" @click="quitGroup()" >退出该群</mt-button>
    </div>
  <!-- 设置群组类型 -->
  <mt-actionsheet
    :actions="actions"
    v-model="popup.groupTypeWrap">
  </mt-actionsheet>
  <!-- 设置群组类型 -->
  </div>
</template>
<script>
import Client from '../../assets/js/common';
import { Button } from 'mint-ui';
import { Toast } from 'mint-ui';
import { Popup } from 'mint-ui';
import { Actionsheet } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import {checkStatus} from '../../assets/js/login';
export default {
  data () {
    return {
      popup: {
        groupTypeWrap: false
      },
      defaultImg: Client.defaultImg,
      defGroupImg: Client.defaultGroupImg,
      MemberFace: [],
      actions:[
        {name: '接收并提示', method: this.AcceptAndNotifyFn},
        {name: '接受不提示', method: this.AcceptNotNotifyFn},
        {name: '屏蔽', method: this.DiscardFn},
      ],
      clickGroupDetails: {},
      groupId: ""
    }
  },
  created () {
     // 登录
    checkStatus((loginInfo) => {
      this.loginInfo = loginInfo;
      this.clickGroupDetails = Client.getStore('ClickCurrentGroupData');
      this.groupId = this.clickGroupDetails.GroupId;
      this.getGroupMemberInfo(this.clickGroupDetails.GroupId);
    });
  },
  methods: {
    back() {
      history.back();
    },
    // 获取当前群组成员
    getGroupMemberInfo(group_id) {
      let That = this;
      let options = {
        'GroupId': group_id,
        'Offset': 0, // 必须从0开始
        'Limit': 2000,
        'MemberInfoFilter': [
          'Account',
          'Role',
          'JoinTime',
          'LastSendMsgTime',
          'ShutUpUntil'
        ]
      };
      webim.getGroupMemberInfo(
        options,
        (resp) => {
          if (resp.MemberNum <= 0) {
            // Toast('该群组目前没有成员');
            return;
          }
          let ids = [];
          for (let i in resp.MemberList) {
            let account = resp.MemberList[i].Member_Account;
            ids.push(account);
          }
          this.getpersonData(ids);
        },
        (err) => {
          console.log(err.ErrorInfo);
        }
      );
    },

    // 个人资料列表
			getpersonData(ids) {
					let tag_list = [
							"Tag_Profile_IM_Nick", // 昵称
							"Tag_Profile_IM_Image", // 头像URL
					];
					let options = {
							'To_Account': ids,
							'TagList': tag_list
					};
					webim.getProfilePortrait(
							options,
							(resp) => {
									 if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
                     let list = resp.UserProfileItem;
                      let arr = [];
                      for(let attr in list){
                        let parson = {}
                        let faceList = list[attr].ProfileItem;
                        // console.log(list[attr]);
                        parson['To_Account'] = list[attr].To_Account;
                        for( let atr in faceList) {
                          // console.log(faceList[atr].Tag);
                          parson[faceList[atr].Tag] = faceList[atr].Value;
                        }
                        arr.push(parson);
                      }
                      this.MemberFace = arr;
									}
							},
							(err) => {
                  //alert(err.ErrorInfo);
                  Client.errInfo();
							}
					);
					// $('#set_profile_portrait_dialog').modal('show');
			},
    AcceptAndNotifyFn() {
    let options = {
        'GroupId': this.clickGroupDetails.GroupId,
        'Member_Account': this.loginInfo.identifier,
        'MsgFlag': 'AcceptAndNotify'
    };
    webim.modifyGroupMember(
            options,
            (resp) => {
               Toast('设置群消息提示类型成功');
                this.changeStorage("ClickCurrentGroupData", "MsgFlag", "接受并提示", null)
                this.clickGroupDetails["MsgFlag"] = "接受并提示";
            },
            (err) => {
                //alert(err.ErrorInfo);
                Client.errInfo();
            }
    );
    },
    AcceptNotNotifyFn() {
      let options = {
        'GroupId': this.clickGroupDetails.GroupId,
        'Member_Account': this.loginInfo.identifier,
        'MsgFlag': 'AcceptNotNotify'
      };
      webim.modifyGroupMember(
              options,
              (resp) => {
                  Toast('设置群消息提示类型成功');
                  this.changeStorage("ClickCurrentGroupData", "MsgFlag", "接受不提示", null)
                  this.clickGroupDetails["MsgFlag"] = "接受不提示";
              },
              (err) => {
                  //alert(err.ErrorInfo);
                  Client.errInfo();
              }
      );

    },
    DiscardFn() {
      let options = {
        'GroupId': this.clickGroupDetails.GroupId,
        'Member_Account': this.loginInfo.identifier,
        'MsgFlag': 'Discard'
      };
      webim.modifyGroupMember(
              options,
              (resp) => {
                  Toast('设置群消息提示类型成功');
                  this.changeStorage("ClickCurrentGroupData", "MsgFlag", "屏蔽", null)
                  this.clickGroupDetails["MsgFlag"] = "屏蔽";
                  },
              (err) => {
                Client.errInfo();
                  // alert(err.ErrorInfo);
              }
      );
    },
    groupTypeWrapper() {
      this.popup.groupTypeWrap = true;
    },
    //群主\管理员 退群
    quitGroup() {
        let options = null;
        if (this.clickGroupDetails.GroupId) {
            options = {
                'GroupId': this.clickGroupDetails.GroupId
            };
        }
        if (options == null) {
            Toast('退群时，群组ID非法');
            return;
        }
        webim.quitGroup(
            options,
            (resp) => {
              Toast('退出成功');
              this.$router.push({path: '/AddressList',query: {'type': 1}})

            },
            (err) => {
              Client.errInfo();
                //alert(err.ErrorInfo);
            }
        );
    },
    changeStorage(storeName, field, changeData, save) {
       let createData = Client.getStore(storeName);
       if(!createData) return;
       createData[field] = changeData;
       Client.setStore(storeName, createData);
       if(save) {
         save = Client.getStore(storeName);
       }
    },
    // 添加群成员
    addGroupMemers(){
      // 私有群才能邀请好友添加群
      if (this.clickGroupDetails.TypeEn === 'Private') {
        this.$router.push({path: 'groupMemers', query: {groupId: this.clickGroupDetails.GroupId, type: 'add'}})
      }
    },
    // 所有群成员
    toMembersAll(){
      Client.setStore("groupDetailsPage",{page: "/memberGroupDetails?groupId="+this.groupId})
      this.$router.push({path: 'groupMemersAll', query: {groupId: this.clickGroupDetails.GroupId}})
    },
  },
  components: {
    'mtButton': Button,
    'mtActionsheet': Actionsheet
  }
}
</script>
<style>
  .sendWrapper {
    width: 3.45rem;
    position: fixed;
    bottom: 0.28rem;
    margin: 0 0.15rem;
  }
  .sendWrapper .mint-button--danger {
    background-color: #4F4F4F;
  }
  .sendWrapper .mint-button--danger .mint-button-text {
    font-size: 0.16rem;
  }
</style>
<style lang="less" scoped rel="stylesheet/less">
  .wrapper {
    .divisionLine {
      height: 0.1rem;
      background-color: #F4F4F4;
    }
    .header {
      width: 3.75rem;
      height: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      font-size: 0.16rem;
      border-bottom: 1px solid #f4f4f4;
      background-color: white!important;
      .return {
        color: #4A4A4A;
        font-size: 0.16rem;
        position: absolute;
        top:50%;
        margin-top:-.08rem;
        left: 0.15rem;
      }
    }
    .groupItem {
      height: 0.8rem;
      padding: 0.15rem 0;
      display: flex;
      background-color: white;
      box-sizing: border-box;
      img {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        margin: 0 0.1rem 0 0.15rem;
      }
      .groupText {
        height: 0.5rem;
        .groupName {
          height: 0.22rem;
          line-height: 0.22rem;
          margin-bottom: 0.08rem;
          font-size: 0.16rem;
          color: #4A4A4A;
        }
        .groupId {
          font-size: 0.14rem;
          color: #818181;
        }
      }
    }
    .myCard {
      height: 0.51rem;
      background-color: white;
      padding: 0 0.15rem;
      .lineWrapper {
        height: 1px;
        .line {
          width: 3.45rem;
          height: 1px;
          background-color: #E5E5E5;
        }
      }
      .myCardTitle {
        height: 0.5rem;
        line-height: 0.5rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.14rem;
        color: #4a4a4a;
        .manageItem {
          display: flex;
          align-items: center;
          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.1rem;
          }
        }
        .notSet {
          display: flex;
          align-items: center;
          img {
            width: 0.15rem;
          }
        }
      }
      .line {
        /*height: 1px solid #E5E5E5;*/
      }
    }
    .selectedFriends {
      height: 0.7rem;
      display: flex;
      justify-content: space-between;
      padding: 0 0.15rem;
      background-color: white;
      align-items: center;
      .friendList{
        display: flex;
        align-items: center;
        .icon {
          width: 0.20rem;
          height: 0.20rem;
          margin-right: 0.1rem;
        }
        .faceItem {
          img {
            width: 0.5rem;
            height: 0.5rem;
            float: left;
            border-radius: 50%;
            margin-right: 0.1rem;
          }
        }
      }
      .Set {
          display: flex;
          align-items: center;
          font-size: 0.12rem;
          img {
            width: 0.15rem;
            height: 0.15rem;
            margin: 0;
          }
      }
    }
    .groupInfo {
      height: 0.7rem;
      background-color: white;
      padding: 0.14rem 0.15rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .Set {
          display: flex;
          align-items: center;
          font-size: 0.12rem;
          img {
            width: 0.15rem;
            height: 0.15rem;
            margin: 0;
          }
        }
      .groupName {
        color: #4F4F4F;
        font-size: 0.14rem;
      }
      .text {
        padding-top: 0.05rem;
        font-size: 0.12rem;
        color: #818181;
        width: 3rem;
        height: .12rem;
        line-height: .12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>


